前言

複習了兩天HTML，緊接著來複習CSS吧！

CSS 階層樣式表

有了HTML定義網頁的內容結構，接著就是需要運用CSS的各種屬性來定義網頁的排版與樣式，先認識一下CSS的語法吧：

div {
	background-color: gray;
	color: #000;
}

1. 此處的div是指選取出HTML中的div元素並準備進一步進行樣式設定，寫在開頭的元素稱為選擇器(選擇器的寫法也有很多種)
2. CSS語法中會在大括號{}裡羅列出預計變更的樣式，每項樣式都會用分號;來進行區隔
3. 樣式寫法在冒號:前的稱為屬性名稱，冒號後的稱為設定值
4. 這段語法表達的意思是div區塊的背景顏色設定為gray，而區塊內文字顏色設為黑色(在CSS中顏色表達可以採用RGB、HEX或HSL，也有部分顏色是有英文名稱可以直接使用)。

需要注意的是CSS樣式中也存在優先序(樣式表由上而下，越後面設定越優先、越具體的選擇器越優先)，優先序愈高的樣式可以蓋掉其他樣式。

常用選擇器寫法

通常會為HTML元素增加class或id進行命名，其中每個id只能被使用一次，而class則是可以被使用多次。

使用方式即在HTML元素的開頭標籤添加class或id屬性並賦予自訂名稱，而在CSS選取時class運用.來選出這個類別、id則運用#來選出這個類別

/* 選取出text這個class來設定樣式 */
.text {
	color: #fff;
}

/* 選取出title這個id來設定樣式 */
#title {
	font-size: 30px;
}

除此之外，選擇器的寫法還有非常多種，可以參考MDN或W3S上的說明，另外推薦一個CSS dinner的小遊戲，遊戲破關的同時也可以學習到很多選擇器的寫法哦！

常用樣式

在剛開始接觸CSS時，比較常會使用到px來進行設定，但慢慢會發現其實px的固定尺寸對於版面需求比較沒有彈性，特別是開始嘗試製作RWD後，需要針對各個設備尺寸進行內容調整時，其實使用相對單位中的em或rem會相較於px來得更為彈性及方便。